<template>
  <view class="my_foods">
    <view class="bar boxShadow">
      <u-tabs
        name="cate_name"
        count="cate_count"
        :list="list"
        :height="100"
        :is-scroll="false"
        :current="current"
        active-color="#D65C45"
        @change="change"
      ></u-tabs>
    </view>

    <!--  -->
    <view v-if="hasOrder == true ? true : false">
      <view
        class="shop boxShadow"
        v-for="(item, index) in goods_list"
        :key="index"
      >
        <view class="shop_name"> {{ item.merchant_name }}</view>
        <view
          class="goods_list"
          v-for="(item1, index1) in item.items"
          :key="index1"
        >
          <image :src="item1.cover" class="image" />
          <view class="right">
            <view>
              <view class="goods_name">{{ item1.title }}</view>
              <view class="goods_num"> x{{ item1.number }}</view>
            </view>
            <view> ￥{{ item1.unit_amount }} </view>
          </view>
        </view>

        <view class="goods_bottom">
          <view> 共计：￥{{ item.amount }}</view>

          <view v-if="current == 2">
            <u-button
              :custom-style="customStyle1"
              shape="circle"
              @click="phone(item.merchant_mobile)"
              >申请售后</u-button
            >
            <u-button
              :custom-style="customStyle2"
              shape="circle"
              @click="orderConfirm(item.ordersn)"
              >确认收货</u-button
            >
          </view>
          <view v-else-if="current == 0">
            <u-button
              :custom-style="customStyle2"
              shape="circle"
              :plain="false"
              @click="toPay(item.ordersn)"
              >去支付</u-button
            >
          </view>
          <view v-else-if="current == 1">
            <u-button
              :custom-style="customStyle2"
              shape="circle"
              @click="$u.toast('通知成功')"
              >催发货</u-button
            >
          </view>
          <view v-else-if="current == 3">
            <u-button
              :custom-style="customStyle1"
              shape="circle"
              @click="phone(item.merchant_mobile)"
              >申请售后</u-button
            >
          </view>
        </view>
      </view>
    </view>

    <view v-else style="margin-top: 100rpx">
      <u-empty text="暂无订单" mode="order"></u-empty>
    </view>

    <tui-loadmore
      text="加载中..."
      v-show="loadingShow"
      :index="3"
      type="red"
    ></tui-loadmore>
    <tui-nomore v-show="noMore"></tui-nomore>

    <u-back-top
      :scroll-top="scrollTop"
      :z-index="100"
      :icon-style="iconStyle"
      :custom-style="iconStyle"
      top="600"
      icon="arrow-up"
      tips="顶部"
    ></u-back-top>
  </view>
</template>

<script>
import { orderStatusCheck } from "@/common/utils";
export default {
  data() {
    return {
      page: 1,
      hasOrder: true, //有订单
      loadingShow: false, //加载更多数据
      noMore: false, //是否有多个分页
      customStyle1: {
        color: "#999999",
        marginRight: "20rpx",
        height: "60rpx",
        width: "172rpx",
      },
      customStyle2: {
        color: "#D65C45",
        height: "60rpx",
        width: "172rpx",
      },
      scrollTop: 0,
      iconStyle: {
        fontSize: "40rpx",
        color: "#D65C45",
      },

      list: [
        {
          cate_name: "待支付",
        },
        {
          cate_name: "待发货",
        },
        {
          cate_name: "待收货",
        },
        {
          cate_name: "已完成",
        },
        {
          cate_name: "已取消",
        },
      ],
      current: 0,
      goods_list: [],
    };
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onReachBottom(e) {
    this.loadingShow = true;
    if (this.noMore) {
      this.loadingShow = false;
    } else {
      // 下一页数据
      this.page += 1;
      this.hasOrder = true;
      var form = {
        status: this.current == 4 ? 10 : this.current + 1,
        page: this.page,
      };
      this.$u.api.builderJInhuoApi(form).then((res) => {
        this.goods_list.push(...res.list);
        // 商品list === 0 且 is_all == 1 不展示nomore
        if (res.list.length != 0 && res.is_all === 1) {
          this.noMore = true;
        } else if (res.is_all === 2 && res.list.length > 0) {
          this.noMore = false;
        }
        res.list.length > 0 ? (this.hasOrder = true) : (this.hasOrder = false);
      });
    }
  },
  methods: {
    change(index) {
      this.page = 1; //切换后都获取第一页 防止page== 上个状态的page值
      this.noMore = false;

      this.current = index;
      this.goods_list = [];
      this.orderList();
    },
    /**
     * 获取订单列表
     */
    orderList() {
      this.hasOrder = true;
      this.goods_list = [];

      var form = {
        page: this.page,
        status: this.current + 1,
      };
      this.$u.api.orderListApi(form).then((res) => {
        this.goods_list = res.list;
        // 商品list === 0 且 is_all == 1 不展示nomore
        if (res.list.length != 0 && res.is_all === 1) {
          this.noMore = true;
        } else if (res.is_all === 2 && res.list.length > 0) {
          this.noMore = false;
        }
        res.list.length > 0 ? (this.hasOrder = true) : (this.hasOrder = false);
      });
    },
    /**
     * 拨打电话
     */
    phone(phone) {
      console.log(phone);

      uni.makePhoneCall({
        phoneNumber: phone,
      });
    },
    /**
     * 订单收货
     */
    orderConfirm(orderNum) {
      var _this = this;
      uni.showModal({
        title: "收货",
        content: "确定已收到商品？",
        success(res) {
          if (res.confirm) {
            var from = {
              ordersn: orderNum,
            };
            _this.$u.api
              .confirmOrderApi(from)
              .then((res) => {
                _this.orderList();
                uni.showToast({
                  title: "收货成功",
                  duration: 2000,
                });
              })
              .catch((error) => {
                _this.$u.toast("操作失败");
              });
          }
        },
      });
    },

    /**
     * 去支付
     */
    toPay(ordersn) {
      var _this = this;

      var form = {
        ordersn: ordersn,
      };
      this.$u.api.orderPayApi(form).then((res) => {
        //小程序发起微信支付
        uni.requestPayment({
          provider: "wxpay",
          timeStamp: res.timeStamp.toString(),
          nonceStr: res.nonce_str,
          package: "prepay_id=" + res.prepay_id,
          signType: res.sign_type,
          paySign: res.sign,
          success: function (res) {
            _this.current = 1;
            _this.orderList();

            // 订单查询
            var time = setInterval(() => {
              _this.$u.api.orderPayStatusApi(form).then((res) => {
                if (res.is_paid === 1) {
                  clearInterval(time);
                }
              });
            }, 2000);
          },
          fail: function (err) {
            _this.$u.toast("支付失败");
          },
          complete: function () {},
        });
      });
    },
  },
  onLoad(option) {
    this.current = parseInt(option.router) - 1;
    this.orderList();
  },
};
</script>

<style scoped lang ='scss' >
@mixin flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.my_foods {
  background-color: #f7f7f7;
  min-height: 100vh;
  padding: 20rpx;
  .u-empty {
    margin-top: 100rpx;
  }
  .bar {
    background-color: #ffffff;
    height: 130rpx;
    line-height: 130rpx;
    border-radius: 20rpx;
    padding: 20rpx 0;
  }
  .goods_bottom {
    padding: 20rpx 0 0rpx 0;
    border-top: 1rpx solid #e6e6e6;
    @include flex-row;
    & > view:nth-child(1) {
      color: #333333;
      font-size: 28rpx;
      font-weight: bold;
    }
    & > view:nth-child(2) {
      @include flex-row;
    }
  }
  .shop {
    padding: 31rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    margin: 20rpx 0;
    .shop_name {
      color: #333333;
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 40rpx;
    }
    .goods_list:last-child {
      padding-bottom: 40rpx;
      margin-bottom: 20rpx;
    }
    .goods_list {
      @include flex-row;
      padding: 20rpx 0;

      .image {
        width: 140rpx;
        height: 140rpx;
        margin-right: 20rpx;
        border-radius: 20rpx;
      }
      .right {
        flex: 1;
        & > view:nth-child(1) {
          @include flex-row;
          .goods_name {
            color: #333333;
            font-size: 30rpx;
            font-weight: bold;
          }
          .goods_num {
            color: #333333;
            font-size: 26rpx;
          }
        }
        & > view:nth-child(2) {
          margin-top: 20rpx;
          color: #d65c45;
          font-size: 32rpx;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
